<template>
  <div>
    <el-form ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row>
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="区域">
            <agent-list style="width: 100%" :agentids="params.agentIds"
                        v-on:listenToChildEvent="getAentId"></agent-list>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动类型">
            <el-select style="width:100%" v-model="params.ptype" placeholder="活动类型" clearable>
              <el-option label="优惠券" value="6"></el-option>
              <el-option label="新用户" value="9"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="活动名称">
            <el-input style="width: 100%" v-model="params.name" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动状态">
            <el-select style="width: 100%" v-model="params.timeType" placeholder="选择活动状态" clearable>
              <el-option label="全部" value="1"></el-option>
              <el-option label="未开始" value="2"></el-option>
              <el-option label="进行中" value="3"></el-option>
              <el-option label="已结束" value="4"></el-option>
              <el-option label="已下线" value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent? 24 : 6" style="text-align: right">
          <el-form-item label-wdith="0">
            <el-button type="primary" icon="el-icon-search" @click="handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column label="活动信息" min-width="200" align="left">
          <template slot-scope="scope">
            <div class="flex-row btween">
              <div class="flex-row" v-if="scope.row.ptype =='6'">
                <span class="act-img ac-aglenbox">券</span>
                <div class="act-title">
                  <div>优惠券</div>
                  <div class="flex">(<span class="text-over" style="max-width: 140px">{{scope.row.name}}</span>)
                  </div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='9'">
                <span class="act-img ac-newuser"> 新</span>
                <div class="act-title">
                  <div>新用户立减</div>
                  <div>({{scope.row.name}})</div>
                </div>
              </div>
            </div>

          </template>
        </el-table-column>
        <el-table-column label="内容" min-width="350" align="left">
          <template slot-scope="scope">
            <div class="flex act-msg">
              <span class="title">日期:</span>
              <span>
                  <span>{{scope.row.starttime}} - {{scope.row.endtime}}</span>
                  <span v-show="scope.row.hasOwnProperty('worktoday')"> | {{scope.row.worktoday|catption1}}</span>
                  <span v-show="scope.row.hasOwnProperty('firstTime')">
                    | {{scope.row.firstTime|catption2(scope.row.secondtime,scope.row.thridtime)}}
                  </span>有效
              </span>
            </div>
            <div class="flex act-msg">
              <span class="title">规则:</span>
              <span v-if="scope.row.ptype =='6'">
              {{scope.row.redusertype =='0'?'全部用户':scope.row.redusertype =='1'?'近'+scope.row.redday +'天未使用用户':scope.row.redlimittype=='2'?'随机用户':''}}{{scope.row.redamount|catpion3}}优惠券，消费满{{scope.row.fulls}}可使用（优惠券限{{scope.row.redlimittype=='0'?'每天限制':scope.row.redlimittype=='1'?'总数量':''}}{{scope.row.rednum}}个，{{scope.row.redpersonlimittype=='0'?'每人一张':scope.row.redpersonlimittype=='1'?'每人每天一张':''}}）
              </span>
              <span v-if="scope.row.ptype =='9'">
                 新用户立减{{scope.row.less}}{{comConfig.unit}}
              </span>
            </div>
            <div class="flex act-msg">
              <span class="title">区域:</span>{{scope.row.agentname?scope.row.agentname:'未知区域'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="80" align="center">
          <template slot-scope="scope">
            <span style="color:#999;" v-if="scope.row.discard">已下线</span>
            <span v-else v-html="$options.filters.catption(scope.row.starttime,scope.row.endtime)"></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="right">
          <template slot-scope="scope">
            <el-button class="el-text-danger" type="text" v-if="!scope.row.discard"  @click="activitiesBecomeInvalid(scope.row)">下线
            </el-button>
            <el-button class="el-text-danger" type="text" @click="activitiesToDelete(scope.row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
      <div class="base-pagination clearfix">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="newPage" :pageSize="pageSize"
                       :page-sizes="[10,20, 30]" background layout="total,sizes, prev, pager, next, jumper"
                       :total="tableData.total">
        </el-pagination>
      </div>
    </div>

  </div>

</template>
<script>
  export default {
    data() {
      return {
        isloadingTable: false, // 表单等待
        isdisabled: false, // 默认区域城市不让下拉
        isCheacked: '1', // 选择的表格类型
        params: { //表格查询
          page: 0,
          size: 10,
          ptype: '', // 活动裂隙
          name: '', // 活动名称
          timeType: '', // 活动状态
          agentIds: [], // 区域
        },
        tableData: {}, // 表单数据
        newPage: 1, // 默认
        pageSize: 10 //分页数量
      }
    },
    filters: {
      catption(s, e) {
        if (!s | !e) return ''
        let date = new Date().getTime()
        let start = new Date(s.replace(/-/g, "/")).getTime()
        let end = new Date(e.replace(/-/g, "/")).getTime()
        if (date < start) return '<span style="color:#a6a6a6;">' + "未开始" + '</span>'
        else {
          if (date < end) return '<span style="color:#0acd68;">' + "进行中" + '</span>'
          else return '<span style="color:#999;">' + "已过期" + '</span>'
        }
      },
      catption1(dd) {
        let str = ''
        if (dd) {
          let arr = []
          dd.forEach((item, index) => {
            if (item == '1') arr.push('周日')
            if (item == '2') arr.push('周一')
            if (item == '3') arr.push('周二')
            if (item == '4') arr.push('周三')
            if (item == '5') arr.push('周四')
            if (item == '6') arr.push('周五')
            if (item == '7') arr.push('周六')
          })
          str += arr.join('、')
        }
        return str
      },
      catption2(t2, t3, t4) {
        let str = ''
        if (t2) {
          str += t2.split(',').join('-')
          if (t3) {
            str += '、' + t3.split(',').join('-')
          }
          if (t4) {
            str += '、' + t4.split(',').join('-')
          }
        } else {
          str += '全天'
        }
        return str
      },
      catpion3(p) {
        if (!p) return ''
        if (p.indexOf(',') > -1) {
          return p.split(',').join('-') + comConfig.unit + '的随机'
        } else {
          return p + comConfig.unit
        }
      }
    },
    methods: {
      getAentId(item) { // 获取子组件传递的区域
        this.params.agentIds = item
      },
      activitiesBecomeInvalid(row) {// 活动下线
        this.isloadingTable = true
        this.$http.get('/server/paotui/activity/discard?' + this.qs.stringify({discard: true, id: row.id})).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '活动已下线'})
            this.getTableList()
          }
        }).finally(() => { this.isloadingTable = false })
      },
      activitiesToDelete(row) { //活动删除
        this.isloadingTable = true
        this.$http.get('/server/paotui/activity/delete?' + this.qs.stringify({deleted: '1', id: row.id})).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '活动已删除'})
            if(this.tableData.list.length =='1'){
              this.handleSizeChange(10)
            } else{
              this.getTableList()
            }
          }
        }).finally(() => { this.isloadingTable = false })
      },
      getTableList() {  //获取商户列表数据
        this.isloadingTable = true
        const params = { ...this.params }
        params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(',') : ''
        this.$http.get('/server/paotui/activity/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => {this.isloadingTable = false })
      },
      handleCurrentChange(page) {  //切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      handleSizeChange(size) { //切换条数
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>
<style lang="scss" scoped>
  .act-img {
    width: 40px;
    height: 40px;
    border-radius: 2px;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    &.ac-newuser {
      background-color: $c-active-newuser;
    }
    &.ac-aglenbox {
      background-color: $c-active-aglenbox;
    }
  }
  .btween {
    justify-content: space-between;
    margin-right: 50px;
  }
  .act-title {
    font-weight: 600;
  }
  .act-msg .title {
    margin-right: 10px;
    font-weight: 600;
  }

</style>
